<template>
    <div
        class="page_root"
        :key="queryUpdateFlag"
        data-page-name="行动项任务管理"
        data-page-identification="b_i0ulzydmfj"
    >
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_tje3ce0h11 容器_4exsz9traf -->
            <al-box class="vid_tje3ce0h11">
                <!-- begin vid_wpvhspioao 自定义模板_dpi21hcb5d -->
                <!--审批详情-->
                <a-modal
                    @cancel="statuState.visible = false"
                    centered
                    :visible="statuState.visible"
                    title="审批详情"
                    :footer="null"
                    :body-style="{ maxHeight: '700px', overflowY: 'auto' }"
                    width="400px"
                >
                    <div class="status-item" v-for="(item, index) in statuState.list">
                        <div class="title-new-status">
                            <div class="left-title"
                                >审批类型:<span class="weight-status-new">{{ item.processName }} </span></div
                            >
                            <div class="right-title"
                                >审批提交时间:<span class="weight-status-new">{{ item.createdDate }} </span></div
                            >
                        </div>
                        <a-steps class="status-step" direction="vertical">
                            <a-step
                                v-for="(inside, index) in item.processTaskList"
                                :title="inside.nodeMessage"
                                :description="inside.taskName + ':' + inside.assignUserName"
                                :status="getIconStatus(inside.nodeStatus)"
                            />
                        </a-steps>
                    </div>
                </a-modal>

                <!--审批详情-->
                <a-modal
                    :visible="urgeState.visible"
                    title="请确认"
                    @ok="confirmUrge"
                    centered
                    @cancel="urgeState.visible = false"
                >
                    是否对该行动项任务进行催办
                </a-modal>
                <!--催办-->
                <a-modal
                    :visible="scoreState.visible"
                    title="加减分详情"
                    :footer="null"
                    width="1000px"
                    @cancel="scoreState.visible = false"
                    centered
                    :body-style="{ paddingTop: '16px' }"
                >
                    <div class="score-title-first">
                        <ExclamationCircleOutlined
                            style="color: orange; margin-right: 8px"
                        />已结算的任务不支持通过编辑修改是否扣分，请联系相关领导通过员工绩效页面做修正加减分处理
                    </div>
                    <div class="score-table" v-if="scoreState.type === '项目总监'">
                        <div class="score-title"
                            >项目总监加减分总和：<span
                                :class="[
                                    calculateTotalTaskPoints(scoreState.scoreData) >= 0 ? 'score-num' : 'score-num-red'
                                ]"
                                >{{ calculateTotalTaskPoints(scoreState.scoreData) }}</span
                            >
                        </div>

                        <div v-for="(item, index) in scoreState.scoreData" :key="index" style="margin-bottom: 17px">
                            <div class="score-month"
                                >{{ item.month }}月绩效结算明细
                                <span class="month-score"
                                    >月度加减分总和：<span class="default-score">{{ getScore(item.data) }}</span></span
                                >
                            </div>
                            <a-table
                                :scroll="{ x: '700px', y: '200px' }"
                                :columns="actionState.labelCoulmn"
                                :dataSource="item.data"
                                bordered
                                :pagination="false"
                            />
                        </div>
                    </div>
                    <div class="score-table" v-if="scoreState.type === '项目经理'">
                        <div class="score-title"
                            >项目经理加减分总和：<span
                                :class="[
                                    calculateTotalTaskPoints(scoreState.scoreData) >= 0 ? 'score-num' : 'score-num-red'
                                ]"
                                >{{ calculateTotalTaskPoints(scoreState.scoreData) }}</span
                            >
                        </div>
                        <div v-for="(item, index) in scoreState.scoreData" :key="index" style="margin-bottom: 17px">
                            <div class="score-month"
                                >{{ item.month }}月绩效结算明细
                                <span class="month-score"
                                    >月度加减分总和：<span class="default-score">{{ getScore(item.data) }}</span></span
                                >
                            </div>
                            <a-table
                                :scroll="{ x: '700px', y: '200px' }"
                                :columns="actionState.labelCoulmn"
                                :dataSource="item.data"
                                bordered
                                :pagination="false"
                            />
                        </div>
                    </div>
                    <div class="score-table" v-if="scoreState.type === '负责人'">
                        <div class="score-title"
                            >项目负责人和任务执行人加减分总和：<span
                                :class="[
                                    calculateTotalTaskPoints(scoreState.scoreData) >= 0 ? 'score-num' : 'score-num-red'
                                ]"
                                >{{ calculateTotalTaskPoints(scoreState.scoreData) }}</span
                            >
                        </div>
                        <div v-for="(item, index) in scoreState.scoreData" :key="index" style="margin-bottom: 17px">
                            <div class="score-month"
                                >{{ item.month }}月绩效结算明细
                                <span class="month-score"
                                    >月度加减分总和：<span class="default-score">{{ getScore(item.data) }}</span></span
                                >
                            </div>
                            <a-table
                                :scroll="{ x: '700px', y: '200px' }"
                                :columns="actionState.labelCoulmn"
                                :dataSource="item.data"
                                bordered
                                :pagination="false"
                            />
                        </div>
                    </div>
                </a-modal>
                <div class="top">
                    <a-form>
                        <a-row style="height: 40px">
                            <a-col :span="5" style="height: 32px; margin-top: 16px">
                                <a-form-item label="工厂/项目名称" :label-col="{ span: 8 }">
                                    <a-select
                                        v-model:value="actionState.filter.projectTreeFormList"
                                        show-search
                                        style="width: 100%"
                                        mode="multiple"
                                        allow-clear
                                        :options="actionState.searchList"
                                        :field-names="{ label: 'projectName', value: 'projectId' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                        @focus="getSearchList"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="5" style="height: 32px; margin-top: 16px">
                                <a-form-item label="计划结束时间" :label-col="{ span: 8 }">
                                    <a-date-picker
                                        style="width: 100%"
                                        v-model:value="actionState.filter.endTime"
                                        valueFormat="YYYY-MM-DD"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="5" style="height: 32px; margin-top: 16px">
                                <a-form-item label="任务负责人" :label-col="{ span: 8 }">
                                    <a-select
                                        v-model:value="actionState.filter.taskOwner"
                                        allowClear
                                        showSearch
                                        :options="peopleList"
                                        :field-names="{ label: 'label', value: 'value' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="5" style="height: 32px; margin-top: 16px">
                                <a-form-item label="任务状态" :label-col="{ span: 8 }">
                                    <a-select
                                        v-model:value="actionState.filter.taskStatusList"
                                        mode="multiple"
                                        :maxTagCount="1"
                                        showArrow="true"
                                        allowClear
                                        showSearch
                                        :options="[
                                            { label: '未启动', value: '未启动' },
                                            { label: '进行中', value: '进行中' },
                                            { label: '完成', value: '完成' },
                                            { label: '延期', value: '延期' },
                                            { label: '延期完成', value: '延期完成' },
                                            { label: '审批中', value: '审批中' }
                                        ]"
                                    />
                                </a-form-item>
                            </a-col>

                            <a-col :span="4" style="height: 32px; margin-top: 16px">
                                <a-space size="middle" style="margin-left: 16px">
                                    <a-button type="primary" class="mr16 ml10 task-fill-btn" @click="getAction">
                                        查询
                                    </a-button>
                                    <a-button class="task-no-btn" type="primary" ghost @click="reset"> 重置 </a-button>
                                </a-space>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <div class="bottom-table">
                    <div class="milepost-title">
                        <div style="width: 50%; margin-left: 8px">行动项任务列表</div>
                        <div
                            ><a-button type="ghost" style="color: #3875ff" @click="handlerAddAction">
                                <template #icon><PlusOutlined /></template>
                                新建</a-button
                            ></div
                        >
                    </div>
                    <a-table
                        bordered
                        rowKey="taskId"
                        :loading="actionState.tableLoading"
                        :columns="actionState.columns"
                        :data-source="actionState.dataList"
                        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
                        :scroll="{ x: scrollX, y: '550px' }"
                        @resizeColumn="handleTaskResizeColumn"
                        :pagination="actionState.pagination"
                    >
                        <template #bodyCell="{ column, record, text }">
                            <template v-if="column.dataIndex === 'projectNames'">
                                <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                                    <template #title>
                                        <p
                                            v-for="(item, index) in handlerGetSpace(record.projectNames)"
                                            :key="index"
                                            style="color: #262626; margin: 0"
                                            >{{ item }}</p
                                        >
                                    </template>
                                    {{ text }}
                                </a-tooltip>
                            </template>
                            <!--                                新-任务进度-->
                            <template v-if="column.dataIndex === 'taskSchedule'">
                                <a-progress
                                    :percent="record.taskSchedule"
                                    status="active"
                                    @click="
                                        changeTaskSchedule(
                                            record.finishPermission,
                                            record.taskSchedule,
                                            record.taskId,
                                            record.taskStatus
                                        )
                                    "
                                />
                            </template>
                            <!--                                end新-任务进度-->
                            <!-- 新-审核标准字段 -->

                            <!-- 审核标准 -->
                            <template
                                v-if="column.dataIndex === 'unclosedRiskNumber' || column.dataIndex === 'riskNumber'"
                            >
                                <a
                                    @click="
                                        handlerShowRisks(
                                            record.actionTaskId,
                                            column.dataIndex === 'unclosedRiskNumber' ? '未关闭' : '全部'
                                        )
                                    "
                                >
                                    {{ text }}
                                </a>
                            </template>
                            <!--                          完成标准-->
                            <template v-if="column.dataIndex === 'finishStandard'">
                                <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                                    <template #title>
                                        <p
                                            v-for="(item, index) in handlerGetSpace(record.finishStandard)"
                                            :key="index"
                                            style="color: #262626; margin: 0"
                                            >{{ item }}</p
                                        >
                                    </template>
                                    <div class="finish-standard">{{ text }}</div>
                                </a-tooltip>
                            </template>
                            <!--                          完成标准-->
                            <!-- 附件模板 -->

                            <template v-if="column.dataIndex === 'milepostName'">
                                {{ text }}
                            </template>
                            <!--                                SOP-->
                            <!--                                SOP-->
                            <!-- 完成标准 -->

                            <!-- 倒计时 -->
                            <template v-if="column.dataIndex === 'countDown'">
                                <div class="count-down-content">
                                    <a-tooltip
                                        placement="top"
                                        :overlayStyle="standardStyle"
                                        color="#fff"
                                        v-if="shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[0]"
                                    >
                                        <template #title>
                                            <div class="count-down-hover">
                                                <p v-for="(item, index) in record.hoverLabelList" :key="index">{{
                                                    item
                                                }}</p>
                                            </div>
                                        </template>
                                        <div class="count-down"
                                            >{{
                                                splitStringByColon(
                                                    shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[1]
                                                )[0]
                                            }}:<span class="weight-num">{{
                                                splitStringByColon(
                                                    shouldDisplayCountDownWithTooltip(record.labelList, '倒计时')[1]
                                                )[1]
                                            }}</span></div
                                        >
                                    </a-tooltip>
                                    <div
                                        v-if="shouldDisplayCountDownWithTooltip(record.labelList, '延期')[0]"
                                        class="extension-color"
                                    >
                                        {{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '延期')[1]
                                            )[0]
                                        }}:<span class="weight-num">{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '延期')[1]
                                            )[1]
                                        }}</span>
                                    </div>

                                    <div
                                        v-if="shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[0]"
                                        :class="{
                                            'all-group-no': hasHyphen(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                                            ),
                                            'all-group-yes': hasPlus(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                                            )
                                        }"
                                        @click="showScore(record.projectDirectorLabelList, '项目总监')"
                                        >{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                                            )[0]
                                        }}:<span class="weight-num">{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目总监')[1]
                                            )[1]
                                        }}</span></div
                                    >

                                    <div
                                        v-if="shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[0]"
                                        :class="{
                                            'pm-score-no': hasHyphen(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                                            ),
                                            'pm-score-yes': hasPlus(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                                            )
                                        }"
                                        @click="showScore(record.pmLabelList, '项目经理')"
                                        >{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                                            )[0]
                                        }}:<span class="weight-num">{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '项目经理')[1]
                                            )[1]
                                        }}</span></div
                                    >

                                    <div
                                        v-if="shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[0]"
                                        :class="{
                                            'ower-score-no': hasHyphen(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                                            ),
                                            'ower-score-yes': hasPlus(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                                            )
                                        }"
                                        @click="showScore(record.taskOwnerLabelList, '负责人')"
                                        >{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                                            )[0]
                                        }}:<span class="weight-num">{{
                                            splitStringByColon(
                                                shouldDisplayCountDownWithTooltip(record.labelList, '任务执行人')[1]
                                            )[1]
                                        }}</span></div
                                    >
                                </div>
                            </template>
                            <!-- 倒计时 -->
                            <template v-if="column.dataIndex === 'taskStatus'">
                                <div class="task-status-new" @click="getTaskStatus(record.actionTaskId, 1)">
                                    <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                                    <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                                    <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                                    <div class="yq-btn" v-else-if="text === '延期'" color="#F5222D">延期</div>
                                    <div class="yqwc-btn" v-else-if="text === '延期完成'" color="#FAAD14">延期完成</div>
                                    <div class="spz-btn" v-else-if="text === '审批中'" color="#FAAD14">审批中</div>
                                    <div class="wqd-btn" v-else-if="text === '下线'" color="#FAAD14">下线</div>
                                    <div v-else>{{ text }}</div>
                                </div>
                            </template>
                            <template v-if="column.dataIndex === 'ppmEnclosureInfoList'">
                                <!--                                  预览/下载-->
                                <div v-for="(item, index) in record.ppmEnclosureInfoList" :key="index">
                                    <a-dropdown>
                                        <span
                                            style="
                                                overflow: hidden;
                                                white-space: nowrap;
                                                text-overflow: ellipsis;
                                                display: block;
                                            "
                                            :title="item.name"
                                        >
                                            {{ item.name }}
                                        </span>
                                        <template #overlay>
                                            <a-menu>
                                                <a-menu-item>
                                                    <a-button
                                                        style="width: 100%"
                                                        type="link"
                                                        size="small"
                                                        :disabled="!item.type.startsWith('image')"
                                                        @click="previewAttachment(item)"
                                                        >预览</a-button
                                                    >
                                                </a-menu-item>
                                                <a-menu-item>
                                                    <a-button
                                                        style="width: 100%"
                                                        type="link"
                                                        size="small"
                                                        @click="handlerDownload(item)"
                                                        >下载</a-button
                                                    >
                                                </a-menu-item>
                                            </a-menu>
                                        </template>
                                    </a-dropdown>
                                </div>
                                <!--                                  预览/下载-->
                            </template>
                            <template v-if="column.dataIndex === 'operation'">
                                <a-button
                                    size="small"
                                    v-if="!record.taskExamStatus"
                                    type="link"
                                    @click="handleActionStart(record)"
                                >
                                    开始
                                </a-button>
                                <a-button
                                    size="small"
                                    v-else
                                    type="link"
                                    @click="actionBeforeOk(record)"
                                    :disabled="
                                        record.taskStatus === '审批中' ||
                                        record.taskStatus === '完成' ||
                                        record.taskStatus === '延期完成'
                                    "
                                >
                                    完成
                                </a-button>
                                <a-divider style="margin: 0; border-color: #3875ff" type="vertical" />
                                <a-button
                                    size="small"
                                    type="link"
                                    @click="handlerEditAction(record)"
                                    :disabled="
                                        record.taskStatus === '审批中' ||
                                        record.taskStatus === '完成' ||
                                        record.taskStatus === '延期完成'
                                    "
                                >
                                    编辑
                                </a-button>
                                <a-divider style="margin: 0; border-color: #3875ff" type="vertical" />

                                <a-dropdown>
                                    <a-button size="small" type="link"> 更多</a-button>
                                    <template #overlay>
                                        <a-menu>
                                            <a-menu-item>
                                                <a-popconfirm
                                                    title="确定要删除吗？"
                                                    @confirm="handlerDeleteAction(record)"
                                                    :disabled="
                                                        record.taskStatus === '审批中' ||
                                                        record.taskStatus === '完成' ||
                                                        record.taskStatus === '延期完成'
                                                    "
                                                >
                                                    <a-button
                                                        size="small"
                                                        :disabled="
                                                            record.taskStatus === '审批中' ||
                                                            record.taskStatus === '完成' ||
                                                            record.taskStatus === '延期完成'
                                                        "
                                                        type="link"
                                                        >删除</a-button
                                                    >
                                                </a-popconfirm>
                                            </a-menu-item>
                                            <a-menu-item>
                                                <a-button
                                                    size="small"
                                                    :disabled="
                                                        record.taskStatus === '审批中' ||
                                                        record.taskStatus === '完成' ||
                                                        record.taskStatus === '延期完成'
                                                    "
                                                    type="link"
                                                    @click="handlerUrge(record)"
                                                >
                                                    催办
                                                </a-button>
                                            </a-menu-item>
                                            <a-menu-item>
                                                <a-button size="small" type="link" @click="warningAction(record)">
                                                    预警
                                                </a-button>
                                            </a-menu-item>
                                            <a-menu-item>
                                                <a-button
                                                    size="small"
                                                    type="link"
                                                    :disabled="record.disabledNoteBtn"
                                                    @click="handlerShowActionNotes(record)"
                                                >
                                                    历史备注
                                                </a-button>
                                            </a-menu-item>
                                        </a-menu>
                                    </template>
                                </a-dropdown>
                            </template>
                        </template>
                    </a-table>
                    <a-modal
                        :visible="actionState.addOrEditActionVisible"
                        :title="actionState.title"
                        destroyOnClose
                        centered
                        width="50%"
                        :ok-button-props="{ loading: okLoading }"
                        :body-style="{ maxHeight: '850px', overflow: 'auto' }"
                        @cancel="actionStateCancel"
                        @ok="handleSubmitAction"
                        :maskClosable="false"
                    >
                        <a-form ref="actionFormRef" :model="actionState.actionList">
                            <div v-for="(item, index) in actionState.actionList" :key="index" class="form-item">
                                <div class="form-content-action">
                                    <a-row>
                                        <a-col :span="12">
                                            <a-form-item
                                                label="工厂/项目名称"
                                                :name="[index, 'projectName']"
                                                :rules="[
                                                    { required: true, message: '请选择工厂/项目名称!', trigger: 'blur' }
                                                ]"
                                            >
                                                <a-tree-select
                                                    v-model:value="actionState.actionList[index].projectName"
                                                    show-search
                                                    style="width: 100%"
                                                    placeholder="请选择"
                                                    allow-clear
                                                    :tree-data="actionState.treeData"
                                                    :fieldNames="{
                                                        children: 'children',
                                                        label: 'projectName',
                                                        value: 'projectId',
                                                        key: 'projectId'
                                                    }"
                                                    @change="treeChange"
                                                    :max-tag-count="1"
                                                />
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="12">
                                            <a-form-item
                                                label="行动项任务名称"
                                                :name="[index, 'actionTaskName']"
                                                :rules="{ required: true, message: '请输入行动项任务名称!' }"
                                            >
                                                <a-input
                                                    placeholder="请输入行动项任务名称"
                                                    v-model:value="actionState.actionList[index].actionTaskName"
                                                />
                                            </a-form-item>
                                        </a-col>
                                    </a-row>
                                    <a-row v-if="actionState.isproject">
                                        <a-col :span="12">
                                            <a-form-item label="项目阶段">
                                                <a-select
                                                    allow-clear
                                                    placeholder="请选择项目阶段"
                                                    v-model:value="actionState.actionList[index].milepostId"
                                                    :field-names="{ label: 'milepostName', value: 'milepostId' }"
                                                    :filter-option="
                                                        (input, option) => {
                                                            return (
                                                                option.milepostName
                                                                    .toLowerCase()
                                                                    .indexOf(input.toLowerCase()) >= 0
                                                            )
                                                        }
                                                    "
                                                    :options="actionState.milepostList"
                                                    showSearch
                                                    @change="actionMchange(index)"
                                                />
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="12">
                                            <a-form-item label="任务名称">
                                                <a-select
                                                    allow-clear
                                                    placeholder="请选择任务名称"
                                                    v-model:value="actionState.actionList[index].taskId"
                                                    :field-names="{ label: 'taskName', value: 'taskId' }"
                                                    :filter-option="
                                                        (input, option) => {
                                                            return (
                                                                option.taskName
                                                                    .toLowerCase()
                                                                    .indexOf(input.toLowerCase()) >= 0
                                                            )
                                                        }
                                                    "
                                                    :options="actionState.taskList"
                                                    showSearch
                                                    @focus="getActionTask(actionState.actionList[index].milepostId)"
                                                />
                                            </a-form-item>
                                        </a-col>
                                    </a-row>

                                    <a-row>
                                        <a-col :span="12">
                                            <a-form-item
                                                label="任务起止时间"
                                                :name="[index, 'allTime']"
                                                :rules="{ required: true, message: '请选择任务起止时间!' }"
                                            >
                                                <a-range-picker
                                                    style="width: 100%"
                                                    v-model:value="actionState.actionList[index].allTime"
                                                    valueFormat="YYYY-MM-DD"
                                                />
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="12">
                                            <a-form-item
                                                label="任务负责人"
                                                :name="[index, 'taskOwner']"
                                                :rules="{ required: true, message: '请选择任务负责人!' }"
                                            >
                                                <a-select
                                                    placeholder="请选择任务负责人"
                                                    v-model:value="actionState.actionList[index].taskOwner"
                                                    showSearch
                                                    :options="peopleList"
                                                    :field-names="{ label: 'label', value: 'value' }"
                                                    :filter-option="
                                                        (input, option) => {
                                                            return (
                                                                option.label
                                                                    .toLowerCase()
                                                                    .indexOf(input.toLowerCase()) >= 0
                                                            )
                                                        }
                                                    "
                                                />
                                            </a-form-item>
                                        </a-col>
                                    </a-row>
                                    <a-row>
                                        <a-col :span="12">
                                            <a-form-item
                                                label="审核员"
                                                :name="[index, 'assessorName']"
                                                :rules="{ required: true, message: '请选择审核员!' }"
                                            >
                                                <a-select
                                                    placeholder="请选择审核员"
                                                    v-model:value="actionState.actionList[index].assessorName"
                                                    showSearch
                                                    :options="peopleList"
                                                    :field-names="{ label: 'label', value: 'value' }"
                                                    :filter-option="
                                                        (input, option) => {
                                                            return (
                                                                option.label
                                                                    .toLowerCase()
                                                                    .indexOf(input.toLowerCase()) >= 0
                                                            )
                                                        }
                                                    "
                                                />
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="12">
                                            <a-form-item
                                                label="PMO"
                                                :name="[index, 'projectManagementOffice']"
                                                :rules="{ required: true, message: '请选择PMO!' }"
                                            >
                                                <a-select
                                                    placeholder="请选择PMO"
                                                    v-model:value="
                                                        actionState.actionList[index].projectManagementOffice
                                                    "
                                                    showSearch
                                                    :options="peopleList"
                                                    :field-names="{ label: 'label', value: 'value' }"
                                                    :filter-option="
                                                        (input, option) => {
                                                            return (
                                                                option.label
                                                                    .toLowerCase()
                                                                    .indexOf(input.toLowerCase()) >= 0
                                                            )
                                                        }
                                                    "
                                                />
                                            </a-form-item>
                                        </a-col>
                                    </a-row>
                                    <a-row class="one-line">
                                        <a-col :span="24">
                                            <a-form-item
                                                label="任务执行人"
                                                :name="[index, 'taskParticipantList']"
                                                :rules="{ required: true, message: '请选择任务执行人!' }"
                                            >
                                                <a-select
                                                    placeholder="请选择任务执行人"
                                                    v-model:value="actionState.actionList[index].taskParticipantList"
                                                    showSearch
                                                    mode="multiple"
                                                    :options="peopleList"
                                                    :field-names="{ label: 'label', value: 'value' }"
                                                    :filter-option="
                                                        (input, option) => {
                                                            return (
                                                                option.label
                                                                    .toLowerCase()
                                                                    .indexOf(input.toLowerCase()) >= 0
                                                            )
                                                        }
                                                    "
                                                />
                                            </a-form-item>
                                        </a-col>
                                        <a-col v-if="taskPeopleList && taskPeopleList.length > 0">
                                            <div style="width: 700px; margin-left: 115px; margin-bottom: 28px">
                                                <a
                                                    href="javascript:;"
                                                    v-for="(item, num) in taskPeopleList"
                                                    @click="handlerAddActionPeople(item.value, index)"
                                                    ><span style="margin: 0 5px">{{ item.value }}</span></a
                                                >
                                            </div>
                                        </a-col>
                                    </a-row>
                                    <a-row class="one-line">
                                        <a-col :span="24">
                                            <a-form-item
                                                :wrapper-col="{ span: 24 }"
                                                name="finishStandard"
                                                label="完成标准"
                                            >
                                                <a-textarea
                                                    :maxlength="1000"
                                                    :rows="3"
                                                    v-model:value="actionState.actionList[index].finishStandard"
                                                    placeholder="请输入"
                                                />
                                            </a-form-item>
                                            <div class="tips" style="margin-top: -4px">
                                                请用”；“号区分不同细项的内容，格式参考：<br />
                                                1）设计反讲机制及频率、并执行；<br />
                                                2）通过反讲，确认研发、产品、测试和现场项目人员等各角色均已对产品设计形成统一认知；
                                            </div>
                                        </a-col>
                                    </a-row>
                                    <a-row class="one-line">
                                        <a-col :span="24">
                                            <a-form-item label="备注">
                                                <a-textarea
                                                    placeholder="请输入备注"
                                                    v-model:value="actionState.actionList[index].description"
                                                />
                                            </a-form-item>
                                        </a-col>
                                    </a-row>
                                    <a-row class="one-line" v-if="actionState.title === '编辑行动项任务'">
                                        <a-col :span="24">
                                            <a-form-item
                                                label="变更原因"
                                                :rules="{ required: true, message: '请输入变更原因!', trigger: 'blur' }"
                                                :name="[index, 'reasonsChange']"
                                            >
                                                <a-textarea
                                                    placeholder="请输入变更原因"
                                                    v-model:value="actionState.actionList[index].reasonsChange"
                                                />
                                            </a-form-item>
                                        </a-col>
                                    </a-row>
                                </div>
                                <!--                            <a-->
                                <!--                                v-if="!actionState.current.actionTaskId && actionState.isTaskAdd === false"-->
                                <!--                                class="del"-->
                                <!--                                @click="handlerDeleteActionItem(index)"-->
                                <!--                                >删除</a-->
                                <!--                            >-->
                            </div>
                        </a-form>
                        <!--                    <a-button-->
                        <!--                        v-if="!actionState.current.actionTaskId && actionState.isTaskAdd === false"-->
                        <!--                        type="primary"-->
                        <!--                        ghost-->
                        <!--                        class="add-btn"-->
                        <!--                        @click="handlerAddActionItem"-->
                        <!--                    >-->
                        <!--                        <plus-outlined />-->
                        <!--                        添加-->
                        <!--                    </a-button>-->
                    </a-modal>

                    <!-- 行动项完成 -->
                    <a-modal
                        :visible="actionState.actionOkVisible"
                        title="完成行动项任务"
                        destroyOnClose
                        centered
                        width="40%"
                        @cancel="actionState.actionOkVisible = false"
                        @ok="handlerSubAction"
                        :ok-button-props="{ loading: confirmLoading }"
                    >
                        <div style="margin-bottom: 10px; font-size: 16px; font-weight: 600"> 完成附件证明</div>
                        <a-upload
                            :file-list="actionState.fileList"
                            :multiple="true"
                            :before-upload="handlerActionUpload"
                            @remove="handleActionRemove"
                            accept=".xlsx,.ppt,.pdf,.PDF, image/*, .docx, .rp, .xls"
                        >
                            <a-button type="primary">
                                <upload-outlined />
                                上传
                            </a-button>
                        </a-upload>
                        <span>支持格式：image/*,.xlsx,.xls,.docx,.rp,.ppt,.pptx,.pdf</span>
                    </a-modal>
                    <!-- 行动项完成 -->
                    <!--                      行动项历史备注-->
                    <a-modal
                        :visible="actionState.visibleNotes"
                        title="历史备注"
                        width="40vw"
                        centered
                        destroyOnClose
                        :footer="null"
                        @cancel="actionState.visibleNotes = false"
                    >
                        <a-table
                            bordered
                            class="note-table"
                            rowKey="taskId"
                            :customRow="customRow"
                            :columns="actionState.notesColumns"
                            :data-source="actionState.noteData"
                            :pagination="false"
                            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
                        />
                    </a-modal>
                    <!--                      行动项历史备注-->
                    <!--                      行动项-风险预警-->
                    <a-modal v-model:visible="actionRisk.warrVisible" title="新增任务风险" @ok="actionRiskOk">
                        <a-form :model="actionRisk" ref="actionRiskRef">
                            <a-row>
                                <a-col :span="24">
                                    <a-form-item
                                        label="任务名称"
                                        name="taskName"
                                        :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]"
                                    >
                                        <a-input v-model:value="actionRisk.taskName" disabled />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item
                                        label="风险描述"
                                        name="riskDescription"
                                        :rules="[{ required: true, message: '请输入风险描述', trigger: 'blur' }]"
                                    >
                                        <a-input v-model:value="actionRisk.riskDescription" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item
                                        label="解决方案"
                                        name="solution"
                                        :rules="[{ required: true, message: '请输入解决方案', trigger: 'blur' }]"
                                    >
                                        <a-input v-model:value="actionRisk.solution" />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
                    </a-modal>
                    <a-modal
                        :visible="actionState.visibleRisk"
                        title="风险"
                        width="80vw"
                        centered
                        destroyOnClose
                        :footer="null"
                        :getContainer="getModalContainer"
                        @cancel="actionState.visibleRisk = false"
                    >
                        <a-table
                            class="risk-table"
                            bordered
                            rowKey="taskId"
                            :customRow="customRow"
                            :columns="actionState.riskColumns"
                            :data-source="actionState.riskList"
                            :pagination="false"
                            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
                        >
                            <template #bodyCell="{ column, record }">
                                <template v-if="column.dataIndex === 'operation'">
                                    <a-button
                                        type="link"
                                        :disabled="record.riskState === '关闭'"
                                        @click="handlerBeforeClose(record)"
                                        >关闭</a-button
                                    >
                                </template>
                            </template>
                        </a-table>
                    </a-modal>
                    <a-modal
                        v-model:visible="stateF.previewVisible"
                        @cancel="handleCancel"
                        width="1000px"
                        title="图片预览"
                        :footer="null"
                    >
                        <div v-if="stateF.isImagePreview">
                            <img :src="stateF.previewImage" alt="附件" style="width: 100%" />
                        </div>
                        <div v-else>
                            <iframe :src="stateF.previewFileUrl" style="width: 100%; height: 500px"></iframe>
                        </div>
                    </a-modal>
                    <a-modal
                        :visible="actionState.closeVisible"
                        title="关闭风险"
                        destroyOnClose
                        centered
                        width="40%"
                        :ok-button-props="{ disabled: btnLoading }"
                        @cancel="actionState.closeVisible = false"
                        @ok="handlerClose"
                    >
                        <a-form ref="closeFormRef" :model="closeCurrent">
                            <div class="form-content">
                                <a-row>
                                    <a-col :span="24">
                                        <a-form-item
                                            label="风险关闭备注"
                                            name="riskRemarks"
                                            :rules="{ required: true, message: '请输入风险关闭备注!' }"
                                        >
                                            <a-textarea v-model:value="closeCurrent.riskRemarks" :rows="5" />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </div>
                        </a-form>
                    </a-modal>
                </div>
                <!-- end vid_wpvhspioao 自定义模板_dpi21hcb5d -->
            </al-box>
            <!-- end vid_tje3ce0h11 容器_4exsz9traf -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    const userInfoStorage = localStorage.getItem('al__USER_INFO')
    if (userInfoStorage) {
        try {
            const userInfo = JSON.parse(userInfoStorage)
        } catch (error) {
            console.log(error)
        }
    }
    const taskLeader = JSON.parse(userInfoStorage)
    const labelToolStyle = {
        maxWidth: '1000px'
    }
    // 分页方法
    const pageSizeChange = (current, size) => {
        actionState.pagination.current = current
        actionState.pagination.pageSize = size
        getAction()
    }
    const pageChange = (page, pageSize) => {
        actionState.pagination.current = page
        actionState.pagination.pageSize = pageSize
        getAction()
    }
    const actionState = reactive({
        filter: {
            endTime: '',
            taskOwner: '',
            taskStatusList: [],
            projectTreeFormList: []
        },
        treeData: [],
        riskList: [],
        visibleRisk: false,
        labelCoulmn: [
            {
                title: '加减分类型',
                width: 120,
                dataIndex: 'pointTypeName'
            },
            {
                title: '加减分数',
                width: 100,
                dataIndex: 'taskPoints'
            },
            {
                title: '加减分触发日期',
                width: 200,
                dataIndex: 'updateTime'
            },
            {
                title: '是否扣分',
                width: 120,
                dataIndex: 'deductStatus'
            },
            {
                title: '审批日期',
                width: 200,
                dataIndex: 'taskRectificationPointsTime'
            },
            {
                title: '是否绩效结算',
                width: 200,
                dataIndex: 'settlementView'
            }
        ],
        permission: true,
        actionOkVisible: false,
        sopList: [],
        CompletionCheckListCheckList: [],
        ppmTemplateCheckList: [],
        fileList: [],
        addOrEditActionVisible: false,
        columns: [
            {
                title: '工厂/项目名称',
                dataIndex: 'projectNames',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'left'
                // fixed: 'left',
            },
            {
                title: '项目阶段',
                dataIndex: 'milepostName',
                resizable: true,
                ellipsis: true,
                width: '140px',
                // fixed: 'left',
                align: 'left'
            },

            {
                title: '任务名称',
                dataIndex: 'taskName',
                ellipsis: true,
                resizable: true,
                width: '220px',
                // fixed: 'left',
                align: 'left'
            },
            {
                title: '行动项任务名称',
                dataIndex: 'actionTaskName',
                ellipsis: true,
                resizable: true,
                width: '220px',
                align: 'left'
            },
            {
                title: '任务状态',
                dataIndex: 'taskStatus',
                resizable: true,
                ellipsis: false,
                width: '140px',
                align: 'center'
            },
            {
                title: '任务进度',
                dataIndex: 'taskSchedule',
                resizable: true,
                ellipsis: false,
                width: '140px',
                align: 'center'
            },
            {
                title: '倒计时及加减分',
                dataIndex: 'countDown',
                resizable: true,
                ellipsis: false,
                width: '250px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            padding: 0
                        }
                    }
                }
            },
            {
                title: '完成标准',
                dataIndex: 'finishStandard',
                resizable: true,
                ellipsis: false,
                width: '150px',
                align: 'center'
            },
            {
                title: '未关闭风险数量',
                dataIndex: 'unclosedRiskNumber',
                resizable: true,
                ellipsis: false,
                width: '150px',
                align: 'center'
            },
            {
                title: '附件',
                dataIndex: 'ppmEnclosureInfoList',
                resizable: true,
                ellipsis: true,
                width: '200px',
                align: 'center'
            },
            {
                title: '任务负责人',
                dataIndex: 'taskOwner',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center'
            },
            {
                title: '审核员',
                dataIndex: 'assessorName',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center'
            },
            {
                title: 'PMO',
                dataIndex: 'projectManagementOffice',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center'
            },
            {
                title: '任务执行人',
                resizable: true,
                dataIndex: 'taskParticipantStr',
                ellipsis: true,
                width: '140px',
                align: 'center'
            },
            {
                title: '计划开始',
                dataIndex: 'startTime',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center'
            },
            {
                title: '实际开始',
                dataIndex: 'examPassTime',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center'
            },
            {
                title: '计划完成',
                dataIndex: 'endTime',
                ellipsis: true,
                width: '120px',
                resizable: true,
                align: 'center'
            },
            {
                title: '	实际完成',
                dataIndex: 'taskFinishTime',
                ellipsis: true,
                resizable: true,
                width: '120px',
                align: 'center'
            },
            {
                title: '计划工时(小时)',
                dataIndex: 'workingHours',
                resizable: true,
                ellipsis: true,
                width: '130px',
                align: 'center'
            },
            {
                title: '实际工时(小时)',
                dataIndex: 'actualWorkHours',
                resizable: true,
                ellipsis: true,
                width: '130px',
                align: 'center'
            },
            {
                title: '工时投入状态',
                dataIndex: 'stateInput',
                resizable: true,
                ellipsis: true,
                width: '120px',
                align: 'center'
            },
            {
                title: '操作',
                dataIndex: 'operation',
                width: '180px',
                align: 'center',
                fixed: 'right'
            }
        ],
        tableLoading: false,
        spinning: false,
        actionList: [],
        actionListItem: {
            taskName: undefined,
            milepostId: undefined,
            taskId: undefined,
            actionTaskName: undefined,
            taskOwner: undefined,
            assessorName: undefined,
            projectManagementOffice: taskLeader.value.name,
            startTime: undefined,
            endTime: undefined,
            allTime: [],
            taskParticipantList: [],
            description: undefined,
            workingHours: undefined,
            parentId: undefined,
            reasonsChange: undefined,
            projectName: undefined,
            finishStandard: ''
        },
        isTaskAdd: false,
        current: {},
        // 项目阶段
        milepostList: [],
        taskList: [],
        notesColumns: [
            { title: '备注内容', dataIndex: 'content', align: 'center' },
            { title: '提交人', dataIndex: 'createdBy', align: 'center' },
            { title: '提交时间', dataIndex: 'createdTime', align: 'center' }
        ],
        noteData: [],
        visibleNotes: false,
        isproject: false,
        riskColumns: [
            { title: '风险描述', dataIndex: 'riskDescription', width: '300px', align: 'center' },
            { title: '解决方案', dataIndex: 'solution', align: 'center' },
            { title: '风险状态', dataIndex: 'riskState', align: 'center' },
            { title: '提交人', dataIndex: 'createdBy', align: 'center' },
            { title: '提交时间', dataIndex: 'createdTime', align: 'center' },
            { title: '解决人', dataIndex: 'solver', align: 'center' },
            { title: '风险关闭备注', dataIndex: 'riskRemarks', align: 'center' },
            { title: '操作', dataIndex: 'operation', align: 'center' }
        ],
        pagination: {
            current: 1,
            pageSize: 20,
            showSizeChanger: true,
            total: '0',
            pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
            showTotal: total => `共 ${total} 条数据`,
            onShowSizeChange: pageSizeChange,
            onChange: pageChange
        },
        closeVisible: false,
        searchList: []
    })

    function getSearchList() {
        get('/solution-ppm/api/v2/built-in-system-ppm/action_task/parent_project_list').then(data => {
            actionState.searchList = data.data
        })
    }

    // 获取树
    function getTree() {
        get('/solution-ppm/api/v2/built-in-system-ppm/action_task/project_tree').then(data => {
            actionState.treeData = data.data
        })
    }

    getTree()

    // 获取项目阶段
    function getActionMilepostList(id) {
        get(`/solution-ppm/api/v2/built-in-system-ppm/delivery_milepost/${id}/milepost_name/list`).then(data => {
            actionState.milepostList = data.data.dataList
        })
    }

    // 根据项目阶段查任务
    function getActionTask(id) {
        post('/solution-ppm/api/v2/built-in-system-ppm/action_task/task_list', {
            milepostId: id
        }).then(data => {
            actionState.taskList = data.data
        })
    }

    function actionMchange(index) {
        actionState.actionList[index].taskId = undefined
    }

    const searchTree = computed(() => {
        const findNode = (nodes, value) => {
            for (let node of nodes) {
                if (node.projectId === value) {
                    return { projectName: node.projectName, projectId: node.projectId, nodeType: node.nodeType }
                }
                if (node.children && node.children.length > 0) {
                    const result = findNode(node.children, value)
                    if (result) {
                        return result
                    }
                }
            }
            return null
        }

        // 检查 projectTreeFormList 是否存在并且是数组
        if (Array.isArray(actionState.filter.projectTreeFormList)) {
            return actionState.filter.projectTreeFormList
                .map(value => findNode(actionState.treeData, value))
                .filter(item => item !== null)
        } else {
            return [] // 如果 projectTreeFormList 不存在或不是数组，返回空数组
        }
    })

    //     获取行动项
    function getAction() {
        post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/list/0`, {
            endTime: actionState.filter.endTime,
            taskOwner: actionState.filter.taskOwner,
            taskStatusList: actionState.filter.taskStatusList,
            projectTreeFormList: searchTree.value,
            pageNo: actionState.pagination.current,
            pageSize: actionState.pagination.pageSize
        }).then(data => {
            if (data.code === 200) {
                actionState.dataList = data.data.dataList
                actionState.current = {}
                actionState.pagination.total = data.data.totalElements
            } else {
                message.error(data.message)
                actionState.dataList = []
            }
        })
        get(`/solution-ppm/api/v2/built-in-system-ppm/action_task/permission`).then(data => {
            if (data.code === 200) {
                actionState.permission = true
            } else {
                actionState.permission = false
            }
        })
    }

    getAction()

    function reset() {
        actionState.filter = {
            endTime: '',
            taskOwner: '',
            taskStatusList: [],
            projectName: []
        }
        actionState.pagination.current = 1
        getAction()
    }

    function groupActionData(data) {
        let currentMilepostName = ''
        let currentTaskName = ''

        return data.map((item, index) => {
            if (currentMilepostName !== item.milepostName) {
                currentMilepostName = item.milepostName
                item.milepostNameSpan = calculateSpan(data, index, 'milepostName', currentMilepostName)
            } else {
                item.milepostNameSpan = 0
            }

            if (currentTaskName !== item.taskName) {
                currentTaskName = item.taskName
                item.taskNameSpan = calculateSpan(data, index, 'taskName', currentTaskName)
            } else {
                item.taskNameSpan = 0
            }

            return item
        })
    }

    function calculateSpan(data, index, property, value) {
        let span = 0
        for (let i = index; i < data.length; i++) {
            if (data[i][property] === value) {
                span += 1
            } else {
                break
            }
        }
        return span
    }

    const peopleList = ref([])

    // 交付参与人s所有人
    function getAllJfPeople() {
        get('/solution-ppm/api/v2/built-in-system-ppm/pmgf/get/allUser').then(({ data }) => {
            peopleList.value = data.userDtoList.map(item => {
                return {
                    label: item.name,
                    value: item.name
                }
            })
        })
    }

    getAllJfPeople()
    const actionFormRef = ref(null)

    function handlerAddAction() {
        if (actionState.permission === false) {
            message.error('暂无权限进行此操作')
        } else {
            actionState.actionList = []
            actionState.actionList.push({ ...actionState.actionListItem })

            actionState.title = '新建行动项任务'
            actionState.addOrEditActionVisible = true
        }
    }

    const taskPeopleList = ref([])

    function getPopleList() {
        post(`/solution-ppm/api/v2/built-in-system-ppm/task/getTopUser/${projectId.value}`).then(data => {
            taskPeopleList.value = data.data.map(item => {
                return {
                    label: item,
                    value: item
                }
            })
        })
    }

    // function handlerDeleteActionItem(index) {
    //     actionState.actionList.splice(index, 1)
    // }
    //
    // function handlerAddActionItem(index) {
    //     actionState.actionList.push({ ...actionState.actionListItem })
    // }
    const okLoading = ref(false)

    // 行动项保存
    function handleSubmitAction() {
        if (actionState.actionList.length < 1) {
            message.info('至少添加一条')
        } else {
            actionFormRef.value.validate().then(() => {
                okLoading.value = true
                let params = Object.values(actionState.actionList).map(item => ({
                    ...item,
                    startTime: item.allTime[0],
                    endTime: item.allTime[1],
                    projectTreeFormList: selectedObjects.value
                }))
                if (actionState.title === '新建行动项任务') {
                    //   新建
                    post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/create`, params[0])
                        .then(data => {
                            if (data.code === 200) {
                                message.success('新建成功')
                                actionState.addOrEditActionVisible = false
                                getAction()
                                actionState.isproject = false
                            } else {
                                message.error(data.message)
                            }
                        })
                        .finally(() => {
                            okLoading.value = false
                        })
                } else {
                    //   编辑
                    put(
                        `/solution-ppm/api/v2/built-in-system-ppm/action_task/${actionState.current.actionTaskId}/update`,
                        params[0]
                    )
                        .then(data => {
                            if (data.code === 200) {
                                message.success('编辑成功')
                                actionState.addOrEditActionVisible = false
                                getAction()
                                actionState.isproject = false
                            } else {
                                message.error(data.message)
                            }
                        })
                        .finally(() => {
                            okLoading.value = false
                        })
                }
            })
        }
    }

    const actionOkDisabled = ref(false)

    function actionBeforeOk(record) {
        get(`/solution-ppm/api/v2/built-in-system-ppm/action_task/${record.actionTaskId}/start_permission`).then(
            data => {
                if (data.code !== 200) {
                    message.error('暂无权限进行此操作')
                } else {
                    if (record.unclosedRiskNumber > 0) {
                        message.info('该任务包含风险，请关闭风险后重试')
                    } else {
                        actionState.current = record
                        actionState.actionOkVisible = true
                    }
                }
            }
        )
    }

    function handleActionStart(record) {
        get(`/solution-ppm/api/v2/built-in-system-ppm/action_task/${record.actionTaskId}/start_permission`).then(
            data => {
                if (data.code !== 200) {
                    message.error('暂无权限进行此操作')
                } else {
                    actionState.current = record
                    put(
                        `/solution-ppm/api/v2/built-in-system-ppm/action_task/${actionState.current.actionTaskId}/start`
                    ).then(data => {
                        if (data.code === 200) {
                            message.success('已开始该任务，请及时完成任务')
                            getAction()
                        } else {
                            message.error(data.message)
                        }
                    })
                }
            }
        )
    }

    const confirmLoading = ref(false)

    // 完成行动项
    function handlerSubAction() {
        if (actionState.fileList.length < 1) {
            message.error('请上传附件')
        } else {
            confirmLoading.value = true
            put(`/solution-ppm/api/v2//built-in-system-ppm/action_task/${actionState.current.actionTaskId}/complete`, {
                ppmEnclosureInfoList: actionState.fileList
            })
                .then(data => {
                    if (data.code === 200) {
                        message.success('操作成功')
                        actionState.actionOkVisible = false
                        actionState.fileList = []
                    } else {
                        message.error(data.message)
                    }
                })
                .finally(() => {
                    confirmLoading.value = false
                })
        }
    }

    function handlerDeleteAction(record) {
        if (actionState.permission === false) {
            message.error('暂无权限进行此操作')
        } else {
            actionState.current = record
            actionState.taskId = record.taskId
            del(`/solution-ppm/api/v2/built-in-system-ppm/action_task/${actionState.current.actionTaskId}`).then(
                data => {
                    if (data.code === 200) {
                        message.success('删除成功')
                        getAction()
                    } else {
                        message.error(data.message)
                    }
                }
            )
        }
    }

    function handlerShowActionNotes(record) {
        actionState.current = record
        get(`/solution-ppm/api/v2/built-in-system-ppm/action_task/${actionState.current.actionTaskId}/history`).then(
            data => {
                if (data.code === 200) {
                    actionState.visibleNotes = true
                    actionState.noteData = data.data.dataList
                } else {
                    message.error(data.message)
                }
            }
        )
    }

    function handlerEditAction(record) {
        if (actionState.permission === false) {
            message.error('暂无权限进行此操作')
        } else {
            const cleepData = cloneDeep(record)
            console.log(cleepData)
            getTree()
            actionState.actionList = []
            actionState.title = '编辑行动项任务'
            cleepData.projectName = cleepData.projectTreeFormList
            if (cleepData.milepostId) {
                actionState.isproject = true
                getActionMilepostList(cleepData.projectTreeFormList[0])
                getActionTask(cleepData.milepostId)
            }
            actionState.current = cleepData
            cleepData.allTime = [cleepData.startTime, cleepData.endTime]
            actionState.actionList.push(cleepData)

            actionState.addOrEditActionVisible = true
        }
    }

    function handlerActionUpload(file) {
        const data = new FormData()
        data.append('file', file)
        post('/file-storage/api/v1/file/upload', data).then(({ data: { fullUrl } }) => {
            if (data) {
                actionState.fileList = [
                    ...actionState.fileList,
                    {
                        uid: file.uid,
                        lastModified: file.lastModified,
                        name: file.name,
                        size: file.size,
                        type: file.type,
                        status: 'done',
                        url: fullUrl
                    }
                ]
            }
        })
        return false
    }

    // tooltip样式
    const standardStyle = {
        maxWidth: 'unset'
    }

    function handleActionRemove(file) {
        actionState.fileList = actionState.fileList.filter(item => item.uid !== file.uid)
    }

    function handlerAddActionPeople(name, index) {
        if (actionState.actionList[index].taskParticipantList.indexOf(name) !== -1) {
            actionState.actionList[index].taskParticipantList = actionState.actionList[
                index
            ].taskParticipantList.filter(item => item !== name)
        } else {
            actionState.actionList[index].taskParticipantList.push(name)
        }
    }

    function actionStateCancel() {
        console.log('关闭')
        actionState.addOrEditActionVisible = false
        actionState.actionListItem.taskParticipantList = []
    }

    // 新行动项预警
    const actionRisk = reactive({
        warrVisible: false,
        taskName: undefined,
        solution: undefined,
        actionTaskId: undefined,
        projectId: undefined,
        milepostId: undefined
    })

    // 模板项目-风险预警
    function warningAction(record) {
        get(`/solution-ppm/api/v2/built-in-system-ppm/action_task/${record.actionTaskId}/start_permission`).then(
            data => {
                if (data.code === 200) {
                    console.log(record, 'record')
                    actionRisk.warrVisible = true
                    actionRisk.taskName = record.actionTaskName
                    actionRisk.riskDescription = record.riskDescription
                    actionRisk.solution = record.solution
                    actionRisk.actionTaskId = record.actionTaskId
                    actionRisk.projectId = record.projectId
                    actionRisk.milepostId = record.milepostId
                } else {
                    message.error('暂无权限进行此操作')
                }
            }
        )
    }

    const actionRiskRef = ref(null)

    function actionRiskOk() {
        actionRiskRef.value.validate().then(() => {
            const params = {
                actionTaskId: actionRisk.actionTaskId,
                projectId: actionRisk.projectId,
                milepostId: actionRisk.milepostId,
                riskDescription: actionRisk.riskDescription,
                solution: actionRisk.solution
            }
            console.log(params, 'params')
            post('/solution-ppm/api/v2/built-in-system-ppm/action_task/warn', params).then(data => {
                if (data.code === 200) {
                    message.success('操作成功')
                    actionRisk.warrVisible = false
                    getAction()
                } else {
                    message.error(data.message)
                }
            })
        })
    }

    const calculateTimeDifference = targetDate => {
        const targetDateTime = new Date(targetDate)
        const currentDateTime = new Date()
        const timeDifference = targetDateTime - currentDateTime
        const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24))

        return {
            days: days,
            result: `${days}天${Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))}小时`
        }
    }

    function shouldDisplayCountDownWithTooltip(labelList, text) {
        const result = labelList?.filter(label => label.includes(text))
        if (result && result.length > 0) {
            return [true, result[0]]
        } else {
            return false
        }
    }

    function hasHyphen(str) {
        return str.includes('-')
    }

    function hasPlus(str) {
        return str.includes('+')
    }

    function splitStringByColon(inputString) {
        return inputString.split(':')
    }

    const shouldDisplayCountDown = targetDate => {
        const { days } = calculateTimeDifference(targetDate)
        return days >= 0 && days <= 7
    }

    function handleTaskResizeColumn(w, col) {
        col.width = w
    }

    // const treeChange = () => {
    //     if (actionState.actionList[0].projectName.length == 1) {
    //         // 判断是否是项目
    //         post(
    //             `/solution-ppm/api/v2/built-in-system-ppm/action_task/check`,
    //             actionState.actionList[0].projectName
    //         ).then(data => {
    //             actionState.isproject = data.data
    //             if (actionState.isproject) {
    //                 getActionMilepostList(actionState.actionList[0].projectName[0])
    //             }
    //         })
    //     } else {
    //         actionState.isproject = false
    //     }
    // }
    const treeChange = () => {
        actionState.actionList[0].milepostId = undefined
        actionState.actionList[0].taskId = undefined
        post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/check`, [
            actionState.actionList[0].projectName
        ]).then(data => {
            actionState.isproject = data.data
            if (actionState.isproject) {
                getActionMilepostList(actionState.actionList[0].projectName)
            }
        })
    }
    // 计算属性，用于找到选中的节点并组成对象数组
    // const selectedObjects = computed(() => {
    //     const findNode = (nodes, value) => {
    //         for (let node of nodes) {
    //             if (node.projectId === value) {
    //                 return { projectName: node.projectName, projectId: node.projectId, nodeType: node.nodeType }
    //             }
    //             if (node.children) {
    //                 const result = findNode(node.children, value)
    //                 if (result) {
    //                     return result
    //                 }
    //             }
    //         }
    //         return null
    //     }
    //
    //     return actionState.actionList[0].projectName
    //         .map(value => findNode(actionState.treeData, value))
    //         .filter(item => item !== null)
    // })
    const selectedObjects = computed(() => {
        const findNode = (nodes, value) => {
            for (let node of nodes) {
                if (node.projectId === value) {
                    return { projectName: node.projectName, projectId: node.projectId, nodeType: node.nodeType }
                }
                if (node.children) {
                    const result = findNode(node.children, value)
                    if (result) {
                        return result
                    }
                }
            }
            return null
        }

        if (!actionState.actionList || !actionState.actionList[0] || !actionState.treeData) {
            return []
        }

        const projectNameValue = actionState.actionList[0].projectName

        if (!projectNameValue) {
            return []
        }

        // 将单一值转换为数组来处理
        const projectNameArray = Array.isArray(projectNameValue) ? projectNameValue : [projectNameValue]

        return projectNameArray.map(value => findNode(actionState.treeData, value)).filter(item => item !== null)
    })

    function getScore(arr) {
        let sum = 0
        if (arr) {
            arr.forEach(item => {
                if (item.deductStatus === '是') {
                    sum += item.taskPoints || 0 // 如果 taskPoints 为 null 或者 undefined，将其视为 0
                }
            })
        }
        return sum.toFixed(2)
    }

    function handlerShowRisks(id) {
        post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/warn_list/${id}`).then(data => {
            actionState.riskList = data.data
            actionState.current.actionTaskId = id
            actionState.visibleRisk = true
        })
    }

    const stateF = reactive({
        previewVisible: false,
        previewImage: '',
        previewFileUrl: '',
        isImagePreview: false
    })

    function previewAttachment(item) {
        // 检查附件类型
        if (item.type.startsWith('image')) {
            stateF.isImagePreview = true
            stateF.previewImage = item.url // 设置预览图片的URL
            stateF.previewVisible = true // 显示模态框
        } else {
            // stateF.isImagePreview = false;
            // // 如果是其他类型的文件，直接在模态框中显示
            // stateF.previewFileUrl = item.url; // 设置预览文件的URL
            message.info('目前仅支持图片预览')
        }
    }

    function handlerDownload({ url, name }) {
        function downBlob(blob) {
            const downloadElement = document.createElement('a')
            const href = window.URL.createObjectURL(blob) // 创建下载的链接
            downloadElement.href = href
            downloadElement.download = name // 下载后文件名
            document.body.appendChild(downloadElement)
            downloadElement.click() // 点击下载
            document.body.removeChild(downloadElement) // 下载完成移除元素
            window.URL.revokeObjectURL(href)
        }

        const data = new FormData()
        data.append('path', url)
        post('/solution-ppm/api/v2/built-in-system-ppm/delivery_task/downloadFile', data, {
            responseType: 'blob',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
            .then(blob => {
                downBlob(blob)
            })
            .finally(() => {})
    }

    const closeCurrent = ref({
        dailyItemId: undefined,
        riskRemarks: ''
    })

    function handlerGetSpace(data) {
        return data?.split(/[,;；]/)
    }

    function handlerBeforeClose(record) {
        if (!record.pmoFlag) {
            message.info('暂无权限')
        } else {
            closeCurrent.value = {
                id: record.id,
                riskRemarks: '',
                type: record.type
            }
            actionState.closeVisible = true
        }
    }

    const closeFormRef = ref(null)

    function handlerClose() {
        closeFormRef.value.validate().then(() => {
            post('/solution-ppm/api/v2/built-in-system-ppm/action_task/close_warn', closeCurrent.value)
                .then(({ code, message: errMsg }) => {
                    if (code === 200) {
                        actionState.closeVisible = false
                        handlerShowRisks(actionState.current.actionTaskId)
                        message.success('操作成功')
                        getAction()
                    } else {
                        message.warning(errMsg || '操作失败')
                    }
                })
                .finally(() => {})
        })
    }

    // 加减分详情弹窗
    const scoreState = reactive({
        visible: false,
        scoreData: [],
        type: ''
    })

    function showScore(data, type) {
        console.log(data, type)
        scoreState.visible = true
        scoreState.scoreData = groupByBusinessDate(data)
        console.log(scoreState.scoreData, '格式化的分数')
        scoreState.type = type
    }

    function groupByBusinessDate(list, key = 'businessDate') {
        const grouped = list.reduce((acc, item) => {
            const groupKey = item[key]
            if (!acc[groupKey]) {
                acc[groupKey] = {
                    month: groupKey,
                    data: []
                }
            }
            acc[groupKey].data.push(item)
            return acc
        }, {})

        return Object.values(grouped)
    }

    function calculateTotalTaskPoints(data) {
        let totalTaskPoints = 0

        data.forEach(monthData => {
            monthData.data.forEach(record => {
                if (record.deductStatus === '是') {
                    // 确保 taskPoints 是数字，并累加到 totalTaskPoints
                    const taskPoints = parseFloat(record.taskPoints)
                    if (!isNaN(taskPoints)) {
                        totalTaskPoints += taskPoints
                    }
                }
            })
        })

        // 返回保留两位小数的结果
        return parseFloat(totalTaskPoints.toFixed(2))
    }

    const urgeState = reactive({
        visible: false,
        current: {}
    })

    //   催办
    function handlerUrge(record) {
        ;(urgeState.visible = true), (urgeState.current = record)
    }

    //   催办
    function confirmUrge() {
        post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/urging/${urgeState.current.actionTaskId}`).then(
            data => {
                if (data.code === 200) {
                    message.success(data.message)
                    urgeState.visible = false
                } else {
                    message.error(data.message)
                }
            }
        )
    }

    const statuState = reactive({
        visible: false,
        list: []
    })
    function getTaskStatus(id, type) {
        get(`/solution-ppm/api/v2/built-in-system-ppm/refactoring_task/task_approval_detail/${id}/${type}    `).then(
            data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                statuState.visible = true
                statuState.list = data.data
            }
        )
    }

    const getIconStatus = status => {
        if (status === 'finish') {
            return 'finish'
        } else if (status === 'process') {
            return 'process'
        } else {
            return 'error'
        }
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    .vid_tje3ce0h11 {
        height: 100%;
        display: block;
        flex-grow: 1;
        padding-top: 16px;
        padding-right: 24px;
        padding-bottom: 16px;
        padding-left: 24px;
        background-color: #ffffff;
    }

    .top {
        padding: 0 20px;
        height: 64px;
        background-color: #fff;
        margin-bottom: 16px;
        border-bottom: 1px solid #d9d9d9;
    }
    .task-fill-btn {
        background: #3875ff;
        border-color: #3875ff;
    }
    .task-no-btn {
        color: #3875ff;
        border-color: #3875ff;
    }
    .bottom-table :deep(.@{ant-prefix}-table-thead) > tr {
        height: 40px;
    }

    :deep(.bottom-table .ant3-table-tbody > tr > td) {
        padding: 8px 8px;
    }
    /* 倒计时 */
    .count-down {
        border-radius: 1px;
        background: rgba(255, 123, 0, 0.1);
        color: #ff7b00;
        height: 14px;
        min-width: 52%;
        margin-right: 3px;
        margin-bottom: 3px;
    }

    /* 全组 */
    .weight-num {
        font-weight: 600;
    }

    .all-group-yes {
        border-radius: 1px;
        background: rgba(48, 191, 120, 0.1);
        color: #30bf78;
        height: 14px;
        width: 52%;
        line-height: 14px;
        margin-right: 3px;
        margin-bottom: 3px;
    }

    /* 项目经理 */
    .pm-score-yes {
        border-radius: 1px;
        background: rgba(48, 191, 120, 0.1);
        color: #30bf78;
        height: 14px;
        line-height: 14px;
        margin-right: 3px;
        width: 45%;
        margin-bottom: 3px;
    }

    /* 负责人 */
    .ower-score-yes {
        border-radius: 1px;
        background: rgba(48, 191, 120, 0.1);
        color: #30bf78;
        height: 14px;
        line-height: 14px;
        width: 50%;
        margin-right: 3px;
    }

    .all-group-no {
        border-radius: 1px;
        background: rgba(245, 34, 45, 0.1);
        color: #f5222d;
        height: 14px;
        width: 44%;
        line-height: 14px;
        margin-bottom: 3px;
        margin-right: 3px;
    }

    /* 项目经理 */
    .pm-score-no {
        border-radius: 1px;
        background: rgba(245, 34, 45, 0.1);
        color: #f5222d;
        height: 14px;
        line-height: 14px;
        margin-right: 3px;
        width: 45%;
    }

    /* 负责人 */
    .ower-score-no {
        border-radius: 1px;
        background: rgba(245, 34, 45, 0.1);
        color: #f5222d;
        height: 14px;
        line-height: 14px;
        width: 50%;
        margin-right: 3px;
    }

    .count-down-hover {
        color: #262626;
    }

    .count-down-hover > p {
        margin: 0;
    }
    /deep/ .form-content-action .ant3-form-item-label {
        width: 115px;
    }

    .form-content-action {
        display: inline-block;
        width: calc(100% - 80px);
    }
    .bottom-table :deep(.@{ant-prefix}-table-thead) > tr {
        height: 40px;
    }

    .bottom-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #3875ff;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #ffffff;
        border-bottom: 1px solid #3875ff;
        padding: 8px 16px;
    }
    .note-table :deep(.@{ant-prefix}-table-thead) > tr {
        height: 40px;
    }

    .note-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #3875ff;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #ffffff;
        border-bottom: 1px solid #3875ff;
        padding: 8px 16px;
    }
    .milepost-title {
        height: 25px;
        display: flex;
        line-height: 25px;
        border-left: 4px solid #3875ff;
        justify-content: space-between;
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: 600;
    }
    .bottom-table {
        background-color: #fff;
        padding: 0 20px 20px 20px;
    }
    .wqd-btn,
    .yq-btn,
    .wc-btn,
    .yqwc-btn,
    .jxz-btn,
    .spz-btn {
        background: #ffffff;
        border-radius: 2px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        letter-spacing: 0;
        text-align: center;
        line-height: 40px;
        font-weight: 400;
        width: 66px;
        height: 22px;
        line-height: 22px;
        margin: 0 auto;
    }

    .wc-btn {
        border: 1px solid rgba(48, 191, 120, 1);
        color: #30bf78;
    }

    .yq-btn {
        border: 1px solid rgba(224, 32, 32, 1);
        color: #e02020;
    }

    .wqd-btn {
        border: 1px solid rgba(140, 140, 140, 1);
        color: #8c8c8c;
    }

    .jxz-btn {
        border: 1px solid rgba(56, 117, 255, 1);
        color: #3875ff;
    }

    .yqwc-btn {
        border: 1px solid rgba(255, 152, 70, 1);
        color: #ff9846;
    }

    .spz-btn {
        border: 1px solid #00b4ec;
        color: #00b4ec;
    }
    .bottom-table {
        height: 100%;
    }
    .extension-color {
        border-radius: 1px;
        background: rgba(89, 89, 89, 0.1);
        color: #595959;
        height: 14px;
        min-width: 51%;
        margin-right: 3px;
        margin-bottom: 3px;
    }

    .count-down-content {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 0 5px;
    }

    .count-down-content > div {
        box-sizing: border-box;
        height: 14px;
        text-align: center;
        line-height: 14px;
        font-size: 12px;
    }
    .score-title {
        margin: 2px 2px 12px 2px;
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .score-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #595959;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
        word-break: break-all;

        .cell-wrapper {
            padding: 0 16px;
        }
    }
    .score-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #fafafa;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #595959;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
    }
    .risk-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #3875ff;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #fff;
        padding: 8px 16px;
        border: none;
    }

    .risk-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        border-bottom: 1px solid #ebebeb;
        padding: 6px 16px;
        word-break: break-all;

        .cell-wrapper {
            padding: 0 16px;
        }
    }
    :deep(.ant3-select-selection-item) {
        max-width: 250px;
    }

    .score-title-first {
        background: rgba(250, 173, 20, 0.1);
        color: #262626;
        height: 36px;
        line-height: 36px;
        padding: 0 16px;
    }

    .score-title {
        font-size: 16px;
        color: #262626;
        font-weight: 600;
        margin: 18px 0;
    }

    .score-num {
        font-size: 18px;
        color: #3875ff;
        font-weight: 600;
    }

    .score-num-red {
        color: #f5222d;
        font-weight: 600;
    }

    .score-month {
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
        margin-bottom: 12px;
    }

    .month-score {
        font-size: 16px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
        display: inline-block;
        margin-left: 24px;
    }

    .default-score {
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .score-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #3875ff;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #fff;
        padding: 8px 16px;
        border: none;
    }
    .count-down-content {
        cursor: pointer;
    }
    .tips {
        font-size: 12px;
        color: #8c8c8c;
        letter-spacing: 0;
        margin-top: -15px;
        margin-bottom: 15px;
        margin-left: 115px;
    }
    .finish-standard {
        display: inlie-block;
        min-width: 70px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    /*样式*/

    .title-new-status {
        height: 62px;
        line-height: 36px;
        padding: 0 16px;
        margin-bottom: 16px;
        background-image: url('http://10.40.0.33:9001/file-storage/457843108093009920.png');
        background-size: cover;
        border: 1px solid #3875ff;
        border-radius: 5px;
    }

    :deep(.ant3-steps-item-container) {
        padding: 0 16px;
    }
    :deep(.ant3-steps-item-tail::after) {
        margin-left: 12px;
        background-color: #3875ff;
    }
    :deep(.ant3-steps-item-description) {
        font-size: 12px;
        color: #595959;
        text-align: left;
        line-height: 20px;
        font-weight: 400;
    }
    :deep(.ant3-steps-item-icon) {
        width: 24px;
        height: 24px;
        line-height: 24px;
        color: #3875ff;
        margin-top: 6px;
    }
    :deep(.ant3-steps-item-title) {
        height: 28px;
        font-size: 14px;
        color: #262626;
        text-align: left;
        line-height: 22px;
        font-weight: 400;
    }
    :deep(.ant3-steps-item-process > .ant3-steps-item-container > .ant3-steps-item-icon) {
        background-color: #3875ff;
    }
    :deep(.ant3-steps-vertical > .ant3-steps-item > .ant3-steps-item-container > .ant3-steps-item-tail::after) {
        background: #3875ff;
    }
    :deep(.status-step .ant3-steps-vertical > .ant3-steps-item .ant3-steps-item-icon) {
        border-color: #3875ff;
    }
    :deep(.ant3-steps-item-finish .ant3-steps-item-icon > .ant3-steps-icon) {
        color: #3875ff !important;
    }
    .task-status-new {
        cursor: pointer;
    }
    .left-title,
    .right-title {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
        letter-spacing: 0;
        text-align: left;
        font-weight: 400;
        height: 31px;
        line-height: 31px;
    }
    .weight-status {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .batch-line {
        width: 100%;
        border-top: 1px solid #d9d9d9;
        margin: 16px 0;
    }
    .weight-status-new {
        font-weight: 600;
        color: #262626;
    }
</style>
